<template>
  <div class="monthly-focus mb-5">
    <home-nav title="榜单" @jumpPlaylist="jumpPlaylist"/>
    <div class="monthly-focus-list border-2 yu-color-text grid grid-cols-3">
      <div class="flex flex-col" v-for="item in playlist" :key="item.id">
        <div class="top ml-4 mt-2" :class="store.isFlag ? 'flex' : '' ">
          <div class="left cursor-pointer shadow-lg mr-2" :class="store.isFlag ? 'w-35 h-35' : ' w-20 h-20' " @click="jumpPlaylist(item.id)">
            <img class="w-full h-full" :src="item.coverImgUrl" alt="">
          </div>
          <div class="right flex flex-col mt-2 text-lg">
            <span>{{ item.name }}</span>
            <span class="mt-2 yu-color-text text-xl">
              <van-icon class-prefix="i-mdi-play-circle" class="mr-2 cursor-pointer yu-textColor-hover" @click="play(item.id)"/>
              <span v-if="store.token">
                <span class="text-sm"  v-if="item.subscribed || store.collect.includes(item.id)" >已收藏</span>
                <van-icon  v-else class-prefix="i-mdi-folder-plus" class="yu-textColor-hover" @click="collectPlaylist(item.id)"/>
              </span>
            </span>
          </div>
        </div>
        <div v-if="store.isFlag" class="mt-2">
          <div
              class="bottom cursor-pointer h-10 pl-4 flex items-center flex justify-between items-center yu-bgColor-hover-only"
              v-for="(track, index) in item.tracks.slice(0, 10)" :key="track.id"
          >
            <div class="w-60 truncate">
              <span class="pr-2" :class="index < 3  ? 'yu-color-text' : '' ">{{ index + 1 }}</span>
              <span>{{ track.name }}</span>
            </div>
            <div class=" w-20">
              <van-icon class-prefix="i-mdi-play-circle" class="mr-2 yu-textColor-hover"  @click="getSongDetail(track.id)"/>
              <van-icon v-if="store.token" class-prefix="i-mdi-pencil-plus" class="mr-2 yu-textColor-hover" @click="addMyPlaylist(track.id)"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <add-playlist/>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {useStore} from "@/store/index"
import { reactive, toRefs } from "vue";

// 组件
import HomeNav from '@/components/HomeNav/index.vue'
// 收藏歌曲
import AddPlaylist from '@/components/AddPlaylist/index.vue'

const playlistReactive = reactive({
  playlist: []
})

const router = useRouter()
const store = useStore()

// 这里只需要前三个数据，原创榜、飙升榜
store.getTopList().then(res => {
  // 获取三个榜单数据之后通过id获取他们对应的歌曲
  res.slice(0, 3).forEach(item => {
    store.getRankingListDetail(item.id).then(res => {
      playlistReactive.playlist.push(res.playlist)
      // console.log(res.playlist)
    })
  })
})

// 播放歌单音乐
const play = (id) => {
  // 获取数据歌单数据
  store.getPlaylistDetail(id)
}
// 播放歌曲音乐
const getSongDetail = (id) => {
  store.getSongDetail(id)
}

// 跳转更多
const jumpPlaylist = (id = '') => {
  let params
  if (id) params = { id }
  router.push({
    name: 'RankingList',
    params
  })
}
// 收藏歌单
const collectPlaylist = (id) => {
  // 收藏歌单
  store.getPlaylistSubscribe(id)
}

// 将歌曲添加到我的歌单
const addMyPlaylist = (id) => {
  store.addPlaylistPopup = true
  // 保存添加歌曲的id
  store.musicId = id.toString()
}

const {playlist} = toRefs(playlistReactive)
</script>

<style scoped lang="scss">
.monthly-focus {
  &-list > div {
    &:nth-of-type(2) {
      border-right: 2px #c2c2c2 solid;
      border-left: 2px #c2c2c2 solid;
    }
  }
}

</style>
